<template>
  <view class="allContainer">
    <view class="questionName"
      ><text>{{ itemObj.id }}.{{ itemObj.questionName }}</text></view
    >
    <view
      class="listItem"
      :class="index == activeIndex ? 'active' : ''"
      v-for="(item, index) in arraylist"
      :key="index"
      @click="clickItem(item, index)"
    >
      <view class="itemOption"> {{ item.optionLabel }} </view>
      <text class="itemOptionText">{{ item.optionValue }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    itemObj: {
      type: Object,
      default: function () {
        return {
          questionAnswer: null,
          optionValue: "",
          sortOrder: "",
          id: "",
          questionName: "",
          questionType: 1, //题目类型，0判断题，1选择题，2音乐题，3图片题
        };
      },
    },
  },
  data() {
    return {
      activeIndex: null,
      arraylist: [],
    };
  },
  created() {
    if (this.itemObj.optionValue) {
      this.arraylist = JSON.parse(this.itemObj.optionValue);
    }

    let questionAnswer = this.itemObj.questionAnswer;
    if (questionAnswer) {
      this.activeIndex = questionAnswer.charCodeAt() - "A".charCodeAt();
    }
  },
  methods: {
    clickItem(item, index) {
      this.activeIndex = index;
      var answer = index == 0 ? "A" : index == 1 ? "B" : index == 2 ? "C" : "D";
      this.itemObj.questionAnswer = answer;
      this.$emit("clickBack", {
        questionId: this.itemObj.id,
        answerValue: this.itemObj.questionAnswer,
        itemObj: this.itemObj,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.allContainer {
  display: flex;
  flex-direction: column;
  padding-left: 32rpx;
  padding-right: 32rpx;

  .questionName {
    padding-top: 60rpx;
    font-size: 32rpx;
    align-items: center;
    color: #000000;
  }
  .listItem {
    display: flex;
    justify-content: row;
    padding-top: 50rpx;
    .itemOption {
      font-size: 32rpx;
      color: #555555;
      width: 49rpx;
      height: 49rpx;
      border: 3rpx solid #b9e1c5;
      border-radius: 50%;
      text-align: center;
    }
    .itemOptionText {
      padding-left: 25rpx;
      font-size: 32rpx;
      align-items: center;
      color: #555555;
      flex: 1;
    }
  }
  .active {
    .itemOption {
      color: #ffffff;
      background: #72b579;
    }
    .itemOptionText {
      color: #72b579;
    }
  }
}
</style>